@charset "UTF-8";

.ui-icon {
	display: inline-block;
	height: 0;
	overflow: visible
}

.artbody,.t-item,.ui-container {
	overflow-x: hidden
}

.ui-icon:before {
	content: "";
	display: block
}

.comment-sound {
	background-color: #fff;
	border-radius: 45px;
	border: 1px solid #ddd;
	width: 100px;
	padding: 6px 10px;
	cursor: pointer;
	margin: 5px 0
}

.comment-sound img {
	float: right;
	margin-left: 10px
}

.comment-sound span img.pause,.comment-sound span img.waiting,.comment-sound span.pause img.pause,.comment-sound span.pause img.waiting {
	display: none
}

.comment-sound span img.playing,.comment-sound span.pause img.playing,.comment-sound span.waiting img.waiting {
	display: inline
}

.comment-sound span.waiting img.pause,.comment-sound span.waiting img.playing {
	display: none
}

.comment-sound span.playing img.pause {
	display: inline
}

.comment-sound span.playing img.playing,.comment-sound span.playing img.waiting,.comment-sound.active img.play {
	display: none
}

.comment-sound div {
	height: 0;
	overflow: hidden
}

.artbody img {
	max-width: 100%;
	margin: 10px auto;
	width: 100%
}

.artbody {
	margin: 0 auto
}

.art-header .title {
	font-size: 24px;
	line-height: 36px;
	margin-top: 10px;
	text-indent: 0
}

.art-header .source-time span {
	color: #A3A3A3;
	margin-right: 10px;
	font-size: 14px;
	display: inline-block
}

.art-header .source-time #source {
	color: #577BA9
}

.art-header .source-time #time {
	font-size: 13px
}

.artbody .sepline {
	border-bottom: 1px solid #ddd;
	height: 1px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px
}

.artbody article .tag {
	padding-left: 18px;
	position: relative;
	font-size: 14px;
	margin-bottom: 6px
}

.artbody article .tag:before {
	position: absolute;
	content: " ";
	height: 16px;
	width: 16px;
	left: 0;
	top: 0;
	background: url(http://img.spriteapp.cn/www/land/tag.png);
	background-size: cover
}

#detailFooter,.fixed {
	position: fixed;
	left: 0
}

.artbody article .tag span {
	margin-right: 2px;
	padding: 4px;
	color: #577BA9
}

.artbody article .maincon {
	width: 100%;
	overflow-x: hidden
}

#js_cmt_addbtn1,#js_cmt_addbtn2,#js_cmt_nofans1,#js_cmt_qa,.icon_edit,.icon_loading_white,.qr_code_pc_outer {
	display: none
}

.ui-loading {
	width: 40px;
	height: 40px;
	text-indent: -10000px;
	background: url(http://mstatic.spriteapp.cn/xx/redesign/release/1.1.9/img/ui-loading.png) no-repeat;
	-webkit-background-size: 40px 40px;
	-webkit-animation-name: ui-loading-anim;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: step-start
}

@-webkit-keyframes ui-loading-anim {
	8.32%,from {
		-webkit-transform: rotate(0)
	}

	16.65%,8.33% {
		-webkit-transform: rotate(30deg)
	}

	16.66%,24.99% {
		-webkit-transform: rotate(60deg)
	}

	25%,33.32% {
		-webkit-transform: rotate(90deg)
	}

	33.33%,41.65% {
		-webkit-transform: rotate(120deg)
	}

	41.66%,49.99% {
		-webkit-transform: rotate(150deg)
	}

	50%,58.32% {
		-webkit-transform: rotate(180deg)
	}

	58.33%,66.65% {
		-webkit-transform: rotate(210deg)
	}

	66.66%,74.99% {
		-webkit-transform: rotate(240deg)
	}

	75%,83.32% {
		-webkit-transform: rotate(270deg)
	}

	83.33%,91.65% {
		-webkit-transform: rotate(300deg)
	}

	91.66%,99.99% {
		-webkit-transform: rotate(330deg)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

.ui-refresh .ui-refresh-down,.ui-refresh .ui-refresh-noMore,.ui-refresh .ui-refresh-up {
	background: #fff;
	padding: 1em 10px;
	border-bottom: 1px solid #ececec;
	font-size: 14px;
	color: #888;
	text-align: center
}

#detailHeader .ui-flex-pack-start a,.ui-input {
	padding-left: 10px
}

@media all and (min-device-width:768px) and (max-device-width:1024px) {
	.ui-refresh .ui-refresh-down,.ui-refresh .ui-refresh-up {
		font-size: 16px
	}
}

.ui-refresh .ui-refresh-down .ui-loading,.ui-refresh .ui-refresh-up .ui-loading {
	display: inline-block;
	width: 25px;
	height: 25px;
	-webkit-background-size: 25px 25px;
	vertical-align: middle
}

.ui-refresh .ui-refresh-down .ui-refresh-label,.ui-refresh .ui-refresh-up .ui-refresh-label {
	display: inline-block;
	vertical-align: middle;
	color: #2E435D
}

body {
	padding-bottom: 50px
}

.fixed {
	z-index: 999;
	top: 0
}

#detailHeader {
	height: 44px;
	background-color: #e21145;
	line-height: 44px;
	width: 100%;
	min-width: 300px
}

#detailHeader a,#detailHeader a:visited {
	color: #fff
}

#detailHeader .ui-flex-pack-start a.btn-xx-back {
	height: 44px;
	display: inline-block;
	width: 30px
}

#detailHeader .ui-flex-pack-end a {
	padding-right: 10px;
	width: 52px;
	height: 44px;
	display: block
}

#detailFooter {
	width: 100%;
	z-index: 2;
	bottom: 0
}

.bar-budejie .button.button-clear {
	font-size: 14px
}

.ui-input-wrap {
	background-color: #e8e8e8;
	height: 44px;
	display: -webkit-box;
	-webkit-box-align: center
}

.ui-input-wrap .ui-btn,.ui-input-wrap i {
	margin-right: 10px
}

.ui-input {
	height: 30px;
	line-height: 30px;
	margin: 7px 10px;
	background: #fff;
	-webkit-box-flex: 1
}

.ui-input input {
	width: 100%;
	height: 100%;
	border: 0;
	background: 0 0;
	-webkit-appearance: none;
	outline: 0
}

.item-user .ui-avatar {
	margin: 5px;
	width: 32px;
	height: 32px
}

footer.bar {
	padding: 0
}

footer.bar section {
	width: 100%
}

.item-divider {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	min-height: 28px;
	line-height: 28px;
	background-color: #f7f7f7;
	color: #a1a1a1
}

.hot .ui-list .ui-list-thumb {
	width: 32px;
	height: 32px;
	margin: 0 5px 0 10px
}

.hot .ui-list .ui-avatar {
	margin: 0;
	width: 32px;
	height: 32px
}

.hot .hot-comment,.hot .hot-comment li {
	height: auto;
	width: 100%
}

.hot .hot-comment li {
	padding: 10px 0
}

.hot .hot-comment li .ui-list-info {
	padding-right: 10px
}

.hot .hot-comment li .hot-comment-user {
	height: 32px;
	line-height: 32px;
	width: 100%
}

.comment-content {
	width: 100%;
	min-height: 30px
}

.comment-content .user-name {
	height: 32px;
	line-height: 32px;
	color: #898989
}

.comment-content .comment-cai,.tool-user-praise {
	text-align: right
}

.ui-container {
	width: 100%
}

.nav.bar {
	padding: 0
}

.detail-icon,.nav.bar.bar-subheader ul li .nav-icon-r {
	display: inline-block;
	height: 0;
	position: relative;
	overflow: visible
}

.detail-icon:before,.nav.bar.bar-subheader ul li .nav-icon-r:before {
	background: url(http://mstatic.spriteapp.cn/static/msite/prod/18/m/img//detail/nav.png) no-repeat;
	-webkit-background-size: 227px auto;
	content: "";
	display: block;
	position: absolute;
	left: 0
}

.nav.bar.bar-subheader {
	border-color: #dfdfdf;
	background-color: #f8f7f7
}

.nav.bar.bar-subheader ul {
	height: 42px;
	overflow: hidden
}

.nav.bar.bar-subheader ul li {
	float: left;
	padding: 0 10px;
	height: 42px;
	line-height: 42px;
	font-size: 16px;
	color: #1a1a1a
}

.nav.bar.bar-subheader ul li a {
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 400;
	padding: 5px
}

.nav.bar.bar-subheader ul li a:hover {
	background-color: #d5d5d5;
	border-radius: 5px;
	padding: 5px
}

.nav.bar.bar-subheader ul li .nav-icon-r {
	width: 14px;
	height: 41px
}

.nav.bar.bar-subheader ul li .nav-icon-r:before {
	background-position: 0 -58px;
	width: 14px;
	height: 41px
}

.nav.bar.bar-subheader ul .nav-border-r {
	height: 41px;
	border-right: 1px solid #dfdfdf
}

.nav.bar {
	position: static
}

.nav.bar-subheader {
	height: 42px
}

.default-banner,.ion-top-banner,.ion-top-banner-close {
	display: inline-block;
	position: relative;
	overflow: visible
}

.default-banner:before,.ion-top-banner-close:before,.ion-top-banner:before {
	background: url(http://mstatic.spriteapp.cn/static/msite/prod/18/m/img//banner/top_banner.png) no-repeat;
	background-size: 188px 84.5px;
	-webkit-background-size: 188px 84.5px;
	content: "";
	display: block;
	position: absolute;
	left: 0
}

.ion-top-banner {
	height: 40px
}

.ion-top-banner:before {
	margin-top: 5px;
	margin-left: 5px;
	height: 40px;
	background-position: 0 1px
}

@media (min-width:320px) {
	.ion-top-banner:before {
		width: 220px
	}
}

@media (min-width:375px) {
	.ion-top-banner:before {
		width: 260px
	}
}

.ion-top-banner-close {
	height: 22px;
	width: 22px
}

.ion-top-banner-close:before {
	height: 22px;
	width: 22px;
	margin-top: 7px;
	margin-left: 8px;
	background-position: 0 -70px
}

#topBanner {
	background-color: #fff;
	height: 53px;
	width: 100%
}

#topBanner .ui-row {
	position: relative;
	width: 100%;
	height: 100%
}

#topBanner .ui-row .ui-col.ui-col-67 {
	width: 70%;
	height: 53px
}

#topBanner .ui-row .ui-col-20,#topBanner .ui-row .ui-col.ui-col-10 {
	height: 100%;
	line-height: 53px;
	text-align: center
}

#topBanner .ui-row .ui-col-10 {
	width: 7%
}

#topBanner .ui-row .ui-col-10 #topBannerClose {
	padding: 12px 2px;
	color: #444;
	font-weight: 300;
	font-size: 20px;
	margin-top: -2px
}

#topBanner .ui-row .ui-col-20 {
	width: 23%
}

#topBanner .ui-row .ui-col-20 .ui-btn {
	vertical-align: middle
}

#topBanner .ui-row .ui-col-20 a {
	color: #fff;
	font-weight: 400
}

.list-xiangce-body {
	width: 100%;
	background-color: #ececec;
	line-height: 0
}

.list-xiangce-body .list-xiangce-hrader {
	height: 36px
}

.list-xiangce-body .list-xiangce-hrader div {
	color: #828282;
	line-height: 36px;
	font-size: 12px;
	padding-left: 12px
}

.list-xiangce-contain {
	display: -webkit-box;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	direction: ltr;
	height: 243px;
	background-color: #fff;
	padding: 12px
}

.list-xiangce-contain .list-xiangce-cell {
	max-width: 142px;
	text-align: center;
	overflow: hidden;
	height: 219px;
	border: 1px solid #e6e6e6;
	margin-right: 6px
}

.list-xiangce-contain .list-xiangce-cell img {
	width: 100%;
	height: 190px;
	object-fit: cover
}

.list-xiangce-contain .list-xiangce-cell div {
	font-size: 13px;
	color: #5d5d5d;
	height: 29px;
	line-height: 29px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}